<template>
  <div class="qcfactorandpf_wrap">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane v-if="sourceKey === 'qzk'" label="前质控" name="qzk">
        <div class="zdpf_grid">
          <div class="header">
            <span>质控因子</span>
          </div>
          <div class="cont">
            <template v-if="qzkyzListData.length>0">
              <el-checkbox-group v-model="qzkcheckList" @change="zkCheckedChange">
                <div class="yz_item" v-for="(item) in qzkyzListData" :key="item.id">
                  <el-checkbox
                    :disabled="sourceKey!=='qzk'"
                    :label="item.value1+','+item.id"
                  >{{item.title}}</el-checkbox>
                </div>
              </el-checkbox-group>
              <!-- <div class="yz_item" v-for="(item) in qzkyzListData" :key="item.id">
                <el-checkbox :label="item.id">{{item.title}}</el-checkbox>
              </div>-->
            </template>
            <div v-else class="yz_item">
              <p>暂无质控因子</p>
            </div>
          </div>
        </div>
        <div class="zdpf_grid">
          <div class="header">
            <span>质控评分</span>
          </div>
          <div class="cont">
            <template v-if="qzkpfListData.length>0">
              <div class="yz_item" v-for="(item,index) in qzkpfListData" :key="item.id">
                <el-radio
                  v-model="qzkradio"
                  :disabled="qzkradio!=index"
                  :label="index"
                >{{item.title}}</el-radio>
              </div>
            </template>
            <div v-else class="yz_item">
              <p>暂无质控评分</p>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="sourceKey === 'qzk'" label="前质控记录" name="qzkjl">
        <div class="zdpf_grid">
          <!-- <div class="header">
            <span>前质控记录</span>
          </div>-->
          <div class="table-wrap">
            <el-table
              :data="qzkjlList"
              lazy
              style="width: 100%"
              :row-key="getRowKeysqzkjl"
              :expand-row-keys="expandsqzkjl"
              @expand-change="exChangeqzkjl"
            >
              <el-table-column type="expand" v-if="qzkjlList.length>0" width="40">
                <template slot-scope="props">
                  <div class="jl_zkyz" v-if="props.row.zkyz.length>0">
                    <div class="lab">质控因子：</div>
                    <div class="cnt">
                      <span class="item" v-for="item in props.row.zkyz" :key="item">{{item}}</span>
                    </div>
                  </div>
                  <div v-else style="padding: 10px 0;">无选择质控因子</div>
                </template>
              </el-table-column>
              <el-table-column prop="createUserName" label="评分人"></el-table-column>
              <el-table-column prop="qcNumber" label="质控分数"></el-table-column>
              <el-table-column prop="qcResultTitle" label="说明"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="sourceKey === 'hzk'" label="后质控" name="hzk">
        <div class="zdpf_grid">
          <div class="header">
            <span>质控因子</span>
          </div>
          <div class="cont">
            <template v-if="hzkyzListData.length>0">
              <el-checkbox-group v-model="hzkcheckList" @change="zkCheckedChange">
                <div class="yz_item" v-for="(item) in hzkyzListData" :key="item.id">
                  <el-checkbox
                    :disabled="sourceKey!=='hzk'"
                    :label="item.value1+','+item.id"
                    :title="item.title"
                  >{{item.title}}</el-checkbox>
                </div>
              </el-checkbox-group>
              <!-- <div class="yz_item" v-for="(item) in hzkyzListData" :key="item.id">
                <el-checkbox :disabled="sourceKey!=='hzk'" :label="item.id">{{item.title}}</el-checkbox>
              </div>-->
            </template>
            <div v-else class="yz_item">
              <p>暂无质控因子</p>
            </div>
          </div>
        </div>
        <div class="zdpf_grid">
          <div class="header">
            <span>质控评分</span>
          </div>
          <div class="cont">
            <template v-if="hzkpfListData.length>0">
              <div class="yz_item" v-for="(item,index) in hzkpfListData" :key="item.id">
                <el-radio
                  v-model="hzkradio"
                  :disabled="hzkradio!=index"
                  :label="index"
                >{{item.title}}</el-radio>
              </div>
            </template>
            <div v-else class="yz_item">
              <p>暂无质控评分</p>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="sourceKey === 'hzk'" label="后质控记录" name="hzkjl">
        <!-- <div class="zdpf_grid">
          <div class="header">
            <span>后质控记录</span>
          </div>
        </div>-->
        <div class="table-wrap">
          <el-table
            :data="hzkjlList"
            lazy
            style="width: 100%"
            :row-key="getRowKeyshzkjl"
            :expand-row-keys="expandshzkjl"
            @expand-change="exChangehzkjl"
          >
            <el-table-column type="expand" v-if="hzkjlList.length>0" width="40">
              <template slot-scope="props">
                <div class="jl_zkyz" v-if="props.row.zkyz.length>0">
                  <div class="lab">质控因子：</div>
                  <div class="cnt">
                    <span class="item" v-for="item in props.row.zkyz" :key="item">{{item}}</span>
                  </div>
                </div>
                <div v-else style="padding: 10px 0;">无选择质控因子</div>
              </template>
            </el-table-column>
            <el-table-column prop="createUserName" label="评分人"></el-table-column>
            <el-table-column prop="qcNumber" label="质控分数"></el-table-column>
            <el-table-column prop="qcResultTitle" label="说明"></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getQcDictionaryGetList,
  getRemoteApplyQcGetList,
  getRemoteApplyQcGetListQcItem
} from 'api/api.js'
export default {
  props: {
    applyTheme: {},
    source: {},
    applyId: {}
  },
  data() {
    return {
      sourceKey: '',
      activeName: 'qzk',
      DepType: '1',
      DepObj: { // 影像类型
        '1': 'XRAY',
        '2': 'CT',
        '3': 'MRI',
        '4': 'US',
        '5': 'DG',
        '6': 'DSA',
        '7': 'PETCT',
        '8': '内窥镜'
      },
      QcDictObj: { // 质控分类
        'RadiologyItem': '技术质控评价因子',
        'RadiologyResult': '技术质控评价评分',
        'DiagnosisItem': '诊断质控评价因子',
        'DiagnosisResult': '诊断质控评价评分',
        'PreQualityItem': '前质控评价因子',
        'PreQualityResult': '前质控评价评分',
        'BackQualityItem': '后质控评价因子',
        'BackQualityResult': '后质控评价评分'
      },
      qzkyzListData: [],
      qzkpfListData: [],
      hzkyzListData: [],
      hzkpfListData: [],
      qzkradio: 0,
      hzkradio: null,
      qzkcheckList: [],
      hzkcheckList: [],
      qzkjlList: [],
      hzkjlList: [],
      // 设置row-key只展示一行
      expandsqzkjl: [], // 只展开一行放入当前行id
      getRowKeysqzkjl: (row) => { // 获取当前行id
        return row.id // 这里看这一行中需要根据哪个属性值是id
      },
      expandshzkjl: [], // 只展开一行放入当前行id
      getRowKeyshzkjl: (row) => { // 获取当前行id
        return row.id // 这里看这一行中需要根据哪个属性值是id
      }
    }
  },
  created() {
    this.activeName = this.source
    this.sourceKey = this.source
    if (this.sourceKey === 'qzk') {
      this.getQcQicData('PreQualityItem')
      this.getQcQicData('PreQualityResult')
    } else {
      this.getQcQicData('BackQualityItem')
      this.getQcQicData('BackQualityResult')
    }
    this.getQcJlList()
    this.hzkradio = this.sourceKey == 'hzk' ? 0 : null
  },
  methods: {
    getzkRes() {
      if ((this.sourceKey === 'qzk' && this.qzkpfListData.length == 0) || (this.sourceKey === 'hzk' && this.hzkpfListData.length == 0)) {
        return {}
      }
      const _qcItemListQ = this.qzkcheckList.length > 0 ? this.qzkcheckList.map(item => { return { qcItemId: item.split(',')[1] } }) : null
      const _qcItemListH = this.hzkcheckList.length > 0 ? this.hzkcheckList.map(item => { return { qcItemId: item.split(',')[1] } }) : null
      const _res = {
        applyId: this.applyId,
        qcType: this.sourceKey === 'qzk' ? 1 : 2,
        qcNumber: this.sourceKey == 'qzk' ? this.CalculationPf(this.qzkcheckList) : this.CalculationPf(this.hzkcheckList),
        title: this.sourceKey == 'qzk' ? this.qzkpfListData[this.qzkradio].title : this.hzkpfListData[this.hzkradio].title,
        qcResultId: this.sourceKey == 'qzk' ? this.qzkpfListData[this.qzkradio].id : this.hzkpfListData[this.hzkradio].id,
        qcItemList: this.sourceKey == 'qzk' ? _qcItemListQ : _qcItemListH
      }
      return _res
    },
    exChangeqzkjl(row, rowList) {
      var that = this
      var idx = -1
      that.qzkjlList.forEach((item, index) => { if (item.id === row.id) { idx = index } })

      if (rowList.length) { // 只展开一行//说明展开了
        that.expandsqzkjl = []
        if (row) {
          that.expandsqzkjl.push(row.id)// 只展开当前行id
          that.getQcJlyzItemList(row.id, idx)
        }
      } else { // 说明收起了
        that.expandsqzkjl = []
      }
    },
    exChangehzkjl(row, rowList) {
      var that = this
      let idx = -1
      that.hzkjlList.forEach((item, index) => { if (item.id === row.id) { idx = index } })
      console.log(idx)

      if (rowList.length) { // 只展开一行//说明展开了
        that.expandshzkjl = []
        if (row) {
          that.expandshzkjl.push(row.id)// 只展开当前行id
          // that.getQcJlyzItemList(row.id, idx)
        }
      } else { // 说明收起了
        that.expandshzkjl = []
      }
    },
    // 获取质控记录
    getQcJlList() {
      // const that = this
      const params = {
        applyId: this.applyId,
        type: this.sourceKey == 'qzk' ? 1 : 2
      }

      getRemoteApplyQcGetList(params).then(res => {
        if (res && res.code == 10000) {
          if (this.sourceKey == 'qzk') {
            this.qzkjlList = res.content.list
          } else {
            this.hzkjlList = res.content.list
          }
        }
      })
    },
    getQcJlyzItemList(qcid, idx) {
      const params = {
        applyQcId: qcid
      }
      getRemoteApplyQcGetListQcItem(params).then(res => {
        if (res && res.code == 10000) {
          if (this.sourceKey == 'qzk') {
            this.qzkjlList[idx]['zkyz'] = res.content.list
          } else {
            this.hzkjlList[idx]['zkyz'] = res.content.list
          }
        }
      })
    },
    // 获取质控因子数据
    getQcQicData: function (code) {
      const that = this
      const params = {
        HospitalCode: this.$store.state.user.hospitalCode,
        DepRedisKey: 'remote_type',
        Dep: that.applyTheme,
        Code: code
      }
      getQcDictionaryGetList(params).then(res => {
        if (res && res.code == 10000) {
          if (code == 'PreQualityItem') {
            this.qzkyzListData = res.content.list
          }
          if (code == 'PreQualityResult') {
            this.qzkpfListData = res.content.list
          }
          if (code == 'BackQualityItem') {
            this.hzkyzListData = res.content.list
          }
          if (code == 'BackQualityResult') {
            this.hzkpfListData = res.content.list
          }
        }
      })
    },
    zkCheckedChange(val) {
      this.getzkyzChecked(this.activeName)
    },
    // 通过质控因子计算质控评分等级
    getzkyzChecked: function (type) {
      if (type == 'qzk') {
        // 前质控
        var count = this.CalculationPf(this.qzkcheckList)
        this.qzkradio = 0
        if (count >= 100) {
          this.qzkradio = 0
        } else {
          var _i = this.calGrade(type, count)
          this.qzkradio = _i
        }
      } else if (type == 'hzk' && this.sourceKey == 'hzk') {
        // 后质控
        let count = this.CalculationPf(this.hzkcheckList)
        this.hzkradio = 0
        if (count >= 100) {
          this.hzkradio = 0
        } else {
          let _i = this.calGrade(type, count)
          this.hzkradio = _i
        }
      }
    },
    // 计算评分
    CalculationPf: function (list) {
      var count = 100
      if (list.length == 0) return 100
      list.forEach(item => {
        count += Number(item.split(',')[0])
      })
      return count
    },
    // 计算评分等级
    calGrade: function (type, count) {
      let _idx = 0
      let _list = 0
      if (type == 'qzk') {
        _list = this.qzkpfListData
        _idx = this.calGradeIdx(_list, count)
      } else if (type == 'hzk') {
        _list = this.hzkpfListData
        _idx = this.calGradeIdx(_list, count)
      }
      return _idx
    },
    // 计算评分，返回评分等级索引
    calGradeIdx: function (list, count) {
      var GCIdx = -1
      var _list = list
      var _gradeLen = _list.length
      for (var i = 0; i < _gradeLen; i++) {
        var _val = _list[i].value1
        var u1, u2, v1, v2, varr
        var reg1 = /[^\d.]/g
        var reg2 = /[^\D.]/g
        if (_val.indexOf(',') > 0) {
          varr = _val.split(',')
          u1 = varr[0].replace(reg2, '')
          v1 = varr[0].replace(reg1, '')
          u2 = varr[1].replace(reg2, '')
          v2 = varr[1].replace(reg1, '')
          // ≤ <  > ≥
          if (count != v1 && count != v2) {
            if ((count < v1 && count > v2) || (count < v2 && count > v1)) {
              return i
            }
          } else {
            if (count == v1) {
              if (u1 == '≥' || u1 == '≤') {
                return i
              }
            } else if (count == v2) {
              if (u2 == '≥' || u2 == '≤') {
                return i
              }
            }
          }
        } else {
          u1 = _val.replace(reg2, '')
          v1 = _val.replace(reg1, '')
          if ((u1 == '>' && count > v1) || (u1 == '≥' && count >= v1) || (u1 == '<' && count < v1) || (u1 == '≤' && count <= v1)) {
            GCIdx = i
          }
        }
      }
      return GCIdx
    }
  }
}
</script>

<style lang="scss" scoped>
.qcfactorandpf_wrap {
  // padding: 20px 0;
  .zdpf_grid {
    margin-bottom: 10px;
    .header {
      padding: 10px 20px;
      background-color: #ecf0f5;
      font-size: 14px;
      font-weight: bold;
    }
    .cont {
      padding: 0 20px;
      .yz_item {
        padding: 10px 0;
        border-bottom: solid 1px #f6f6f6;
        p {
          color: #999;
        }
        .el-checkbox {
          width: 100%;
        }
      }
    }
  }
  .jl_zkyz {
    text-align: left;
    display: flex;
    padding: 10px 20px;
    .lab {
      width: 28%;
      margin: 5px 0;
    }
    .cnt {
      width: 72%;
      span {
        display: inline-block;
        padding: 2px 4px;
        background-color: #e5e9f2;
        border-radius: 2px;
        margin: 2px 4px 2px 0;
      }
    }
  }
}
</style>

<style lang="scss">
.qcfactorandpf_wrap {
  .el-checkbox__label {
    white-space: normal;
    vertical-align: top;
  }
}
</style>
